<template>
  <!-- 新闻详情 -->
  <div class="newsDetailPc">
    <div class="box">
      <div class="title">{{ data?.name }}</div>
      <div class="date" v-if="!data?.videofile">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 浏览量：{{
          data?.hit
        }}
        &nbsp; &nbsp;<span v-if="data?.source"
          >新闻来源:{{ data?.source }}</span
        >
      </div>
      <div class="date" v-if="data?.videofile">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 播放量：{{
          data?.views
        }}
        &nbsp; &nbsp;<span v-if="data?.source"
          >新闻来源:{{ data?.source }}</span
        >
      </div>
      <div class="line"></div>
      <div class="content">
        <div class="video-box" v-if="data?.videofile">
          <video
            class="video"
            :poster="data?.webimages"
            controls
            @play="onPlay"
          >
            <source :src="data.videofile" type="video/mp4" />
          </video>
        </div>
        <div class="html">
          <div v-html="data?.contentweb"></div>
        </div>
      </div>
      <div class="line"></div>
      <div class="footer">
        <div class="left">
          <toNews
            :detail="prevNext?.previous"
            class="prev"
            v-if="prevNext?.previous"
          >
            上一篇：{{ prevNext?.previous?.name }}
          </toNews>
          <toNews :detail="prevNext?.next" class="next" v-if="prevNext?.next">
            下一篇：{{ prevNext?.next?.name }}
          </toNews>
        </div>
        <div class="back" @click="toList">返回列表</div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="newsDetailMobile">
    <div class="box">
      <div class="title">{{ data?.name }}</div>
      <div class="date" v-if="!data?.videofile">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 浏览量：{{
          data?.hit
        }}
        &nbsp; &nbsp;<span v-if="data?.source"
          >新闻来源:{{ data?.source }}</span
        >
      </div>
      <div class="date" v-if="data?.videofile">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 播放量：{{
          data?.views
        }}
        &nbsp; &nbsp;<span v-if="data?.source"
          >新闻来源:{{ data?.source }}</span
        >
      </div>
      <div class="line"></div>
      <div class="content">
        <div class="video-box" v-if="data?.videofile">
          <video
            class="video"
            :poster="data?.webimages"
            controls
            @play="onPlay"
          >
            <source :src="data.videofile" type="video/mp4" />
          </video>
        </div>
        <!-- <div v-html="data?.contentweb"></div> -->
        <div class="html">
          <div v-html="data?.contentmobile"></div>
        </div>
      </div>

      <div class="line"></div>
      <div class="footer">
        <div class="left">
          <toNews
            :detail="prevNext?.previous"
            class="prev"
            v-if="prevNext?.previous"
          >
            上一篇：{{ prevNext?.previous.name }}
          </toNews>
          <toNews :detail="prevNext?.next" class="next" v-if="prevNext?.next">
            下一篇：{{ prevNext?.next.name }}
          </toNews>
        </div>
        <div class="back-box">
          <div class="back" @click="toList">返回列表</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import toNews from "@/components/toNews";
export default {
  components: {
    toNews,
  },
  computed: {
    ...mapState("common", ["webInfo"]),
    ...mapGetters("common", ["getNavInfo"]),
  },
  data() {
    return {
      data: null,
      prevNext: null,

      played: false,
    };
  },
  watch: {
    $route(newData) {
      if (newData.query.id) {
        this.getData(newData.query.id);
      }
    },
  },
  mounted() {
    this.getData(this.$route.query.id);
  },
  methods: {
    async onPlay() {
      if (!this.played) {
        this.played = true;
        await this.$request.get("/khcommon/addViews", {
          params: {
            id: this.data.id,
          },
        });
      }
    },
    prevNextClick(e) {
      if (e.url) {
        window.open(e.url);
      } else if (e.videofile) {
        window.open(e.videofile, "_blank");
      } else {
        this.$router.push({
          name: this.$router.currentRoute.value.name,
          query: {
            id: e.id,
          },
        });
      }
    },
    /**
     * 返回列表
     */
    toList() {
      console.log(this.data.category_id);
      if (this.data.category_id == 3) {
        this.$router.push({
          name: "innovationScience",
        });
      } else if (this.data.category_id == 4) {
        this.$router.push({
          name: "innovationOverseas",
        });
      } else if (this.data.category_id == 58) {
        this.$router.push({
          name: "groupNews",
        });
      } else if (this.data.category_id == 59) {
        this.$router.push({
          name: "mediaReport",
        });
      } else if (this.data.category_id == 106) {
        this.$router.push({
          name: "socialResponsibilityChildSafety",
        });
      } else if (this.data.category_id == 107) {
        this.$router.push({
          name: "socialResponsibilityChildSafety",
        });
      } else if (this.data.category_id == 76) {
        this.$router.push({
          name: "humanResourcesStaff",
        });
        // } else {
        //   this.$router.back();
      }
    },
    /**
     * 获取数据
     */
    async getData(id) {
      try {
        const result = await this.$request.get("/khcommon/singlePage", {
          params: {
            id: id,
          },
        });
        //上下篇
        const prevNext = await this.$request.get("/khcommon/previousNext", {
          params: {
            id: id,
          },
        });
        this.prevNext = prevNext.data;
        this.data = result.data;
        this.played = false;
        document.title = `${this.webInfo?.webname}_${this.data?.category_name}`;

        this.$emit("change", this.data.category_id);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    async onPlayerPlay() {
      try {
        await this.$request.get("/khcommon/addViews", {
          params: {
            id: this.data?.id,
          },
        });
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .newsDetailMobile {
    display: none;
  }

  .newsDetailPc {
    background: #fafafa;
    display: flex;
    @include fn.fluidContainer;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;

    .box {
      overflow: hidden;
      padding: 30px;
      border-radius: 10px;
      @include fn.container;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      box-sizing: border-box;

      .html {
        overflow: hidden;

        width: 1140px;
      }

      .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        // align-items: center;
        box-sizing: border-box;
        // padding: 0 20px;

        .video-box {
          display: flex;
          justify-content: center;
          width: 100%;

          .video {
            margin-top: 30px;
            width: 1140px;
            height: 640px;
            object-fit: cover;
          }
        }
      }

      .title {
        // @include fn.ellipsis();
        line-height: 40px;
        font-size: 32px;

        font-weight: 500;
        color: #333333;
      }

      .date {
        margin-top: 40px;
        font-size: 16px;

        font-weight: 400;
        color: #999999;
        line-height: 29px;
      }

      .line {
        margin: 34px 0;

        width: 100%;
        height: 1px;
        background: #eeeeee;
      }

      .footer {
        margin-top: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 73px;

        .left {
          height: 80px;
          display: flex;

          flex-direction: column;
          justify-content: space-between;
          // font-size: 20px;
          //
          // font-weight: 400;
          // color: #666666;

          .prev {
            font-size: 16px;
            color: #666666;
            line-height: 40px;
            height: 40px;
            @include fn.ellipsis();
          }

          .next {
            font-size: 16px;
            color: #666666;
            line-height: 40px;
            height: 40px;
            @include fn.ellipsis();
          }
        }

        .back {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 138px;
          height: 40px;
          background: color.$base;
          color: #fff;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .newsDetailPc {
    display: none;
  }

  .newsDetailMobile {
    overflow: hidden;
    background: #fafafa;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: fn.rpx(40) 0;

    .box {
      box-sizing: border-box;
      padding: fn.rpx(30);
      border-radius: fn.rpx(10);
      width: fn.rpx(700);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;

      .content {
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: column;
        // align-items: center;
        box-sizing: border-box;

        // padding: 0 fn.rpx(20);
        .html {
          overflow: hidden;

          width: 100%;
        }
        .video-box {
          display: flex;
          justify-content: center;
          width: 100%;

          .video {
            margin-top: fn.rpx(30);
            width: fn.rpx(700);
            height: fn.rpx(400);
            object-fit: cover;
          }
        }
      }

      .title {
        // @include fn.ellipsis();
        font-size: fn.rpx(32);

        font-weight: bold;
        color: #333333;
        line-height: fn.rpx(40);
      }

      .date {
        margin-top: fn.rpx(40);
        font-size: fn.rpx(16);

        font-weight: 400;
        color: #999999;
        line-height: fn.rpx(29);
      }

      .line {
        margin-top: fn.rpx(34);
        width: 100%;
        height: fn.rpx(1);
        background: #eeeeee;
      }

      .footer {
        margin-top: fn.rpx(20);
        width: 100%;
        display: flex;
        flex-direction: column;

        // height: fn.rpx(73);

        .left {
          height: fn.rpx(80);
          display: flex;
          flex-direction: column;

          font-size: fn.rpx(20);

          font-weight: 400;
          color: #666666;

          .prev {
            @include fn.ellipsis(1);
            font-size: fn.rpx(16);
            color: #666666;
            line-height: fn.rpx(40);
            height: fn.rpx(40);
          }

          .next {
            @include fn.ellipsis(1);
            font-size: fn.rpx(16);
            color: #666666;
            line-height: fn.rpx(40);
            height: fn.rpx(40);
          }
        }

        .back-box {
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: fn.rpx(20);

          .back {
            font-size: fn.rpx(16);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: fn.rpx(138);
            height: fn.rpx(40);
            background: color.$base;
            color: #fff;
            border-radius: fn.rpx(20);
          }
        }
      }
    }
  }
}
</style>